<template>
    <vab-query-form>
      <vab-query-form-top-panel v-if="config_table.search">
        <el-form inline label-width="49px" :model="queryForm" @submit.prevent>
          <!-- 状态 -->
          <el-form-item v-if="config_table.status_select == true" class="z-col" label="">
            <el-select v-model.trim="queryForm.search.status" clearable filterable :placeholder="'请选择状态'">
              <el-option v-for="(item, status_index) in config_table.status_list" :key="status_index" :label="item" :value="status_index" />
            </el-select>
          </el-form-item>
  
          <!-- 外键单选 -->
          <template v-for="col in config_table.cols">
            <template v-for="(foreign, f_index) in config_table.foreign_list">
              <el-form-item v-if="col.model == f_index && col.search == 'true'" class="z-col">
                <el-select
                  v-model.trim="queryForm.search[col.field]"
                  clearable
                  filterable
                  :placeholder="'请选择' + col.comment"
                  @change="foreignChange($event, col.model, col.field)"
                >
                  <el-option
                    v-for="(status_item, status_index) in config_table.foreign_list[col.model]"
                    :key="status_index"
                    :label="status_item.name"
                    :value="status_item.id"
                  />
                </el-select>
              </el-form-item>
            </template>
          </template>
          <!-- 外键多选 -->
          <template v-for="col in config_table.cols">
            <template v-for="(selection, s_index) in config_table.selection_list">
              <el-form-item v-if="col.model == s_index && col.search == 'true'" class="z-col">
                <el-select v-model.trim="queryForm.search[col.field]" clearable filterable multiple :placeholder="'请选择' + col.comment">
                  <el-option
                    v-for="(status_item, status_index) in selection_list[col.model]"
                    :key="status_index"
                    :label="status_item.name"
                    :value="status_item.name"
                  />
                </el-select>
              </el-form-item>
            </template>
          </template>
  
          <template v-for="ds in config_table.date_search">
            <el-form-item class="z-col2" label="">
              <el-date-picker
                v-model="queryForm[ds.field]"
                :end-placeholder="ds.name + '结束日期'"
                range-separator="至"
                :start-placeholder="ds.name + '开始日期'"
                type="daterange"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </template>
  
          <el-form-item v-if="config_table.search != true" class="z-col2">
            <el-input v-model="queryForm.key" clearable :placeholder="'请输入' + config_table.search + '搜索'" style="width: 100%" />
          </el-form-item>
  
          <el-form-item class="z-col1">
            <el-button :disabled="isLoading" :icon="Search" native-type="submit" type="primary" @click="selectData">查询</el-button>
          </el-form-item>
          <el-form-item v-if="config_table.export == '1'" class="z-col_">
            <el-button :icon="Expand" type="primary" @click="exportData">导出</el-button>
          </el-form-item>
          <el-form-item v-if="config_table.export == '1'" class="z-col1">
            <el-button :icon="Expand" type="warning" @click="check_all">校验全部</el-button>
          </el-form-item>
          <el-form-item v-if="config_table.export == '1'" class="z-col1">
            <el-button :icon="Expand" type="success" @click="check_day">校验当日</el-button>
          </el-form-item>
          <el-form-item v-if="config_table.export == '1'" class="z-col1">
            <el-button :icon="Expand" type="info" @click="check_truncate">清空记录</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
  
      <vab-query-form-left-panel>
        <el-button v-if="!is_recycle && config_table._add == '1'" :icon="Plus" type="primary" @click="add">添加</el-button>
        <el-button v-if="!is_recycle && config_table._del == '1'" :icon="Delete" type="danger" @click="del">{{ btn_delete }}</el-button>
        <!-- <el-button v-if="!is_recycle && config_table.export == '1'" :icon="Export" type="success" @click="exports">导出选中</el-button> -->
        <el-button v-if="!is_recycle && config_table.import == '1'" :icon="Plus" type="warning" @click="importTemplate">导入模板</el-button>
  
        <import-data
          v-if="!is_recycle && config_table.import == '1'"
          :model="config_table.tablename"
          :tablename="config_table.tablename"
          @get-data="getData"
        />
  
        <template v-for="(btn, btn_index) in btn_arr" :key="btn_index">
          <el-button v-if="!is_recycle && btn.name" :type="btn.type" @click="btnCallback(btn.method)">{{ btn.name }}</el-button>
        </template>
        <el-button v-if="is_recycle" :icon="Plus" type="primary" @click="recovery">恢复</el-button>
        <el-button v-if="is_recycle" :icon="Delete" type="danger" @click="com_del">彻底删除</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel v-if="config_table._del == '1' && config_table.recycle == true">
        <div class="custom-table-right-tools">
          <el-button v-if="!is_recycle && config_table.login_log.accountid == '1'" type="info" @click="recycle">
            <vab-icon icon="recycle-fill" />
            <span>{{ btn_recycle }}</span>
          </el-button>
          <el-button v-else type="info" @click="getData">
            <vab-icon icon="arrow-left-double-fill" />
            <span>返回</span>
          </el-button>
        </div>
      </vab-query-form-right-panel>
    </vab-query-form>
  </template>
  
  <script lang="ts" setup>
  import { Delete, Expand, Plus, Search } from '@element-plus/icons-vue'
  import { ElLoading } from 'element-plus'
import { api_truncate,api } from '/@/api/obj'
  defineOptions({
    name: 'ObjOpbar',
  })
  const props = defineProps({
    is_recycle: {
      type: Boolean,
      default: false,
    },
    config_table: {
      type: Object,
      default: {},
    },
    //按钮数组
    btn_arr: {
      type: Array,
      default: [{}], //name,method
    },
    btn_recycle: {
      type: String,
      default: '回收站', //name,method
    },
    btn_delete: {
      type: String,
      default: '删除', //name,method
    },
    exportMethod: {
      type: String,
      default: 'exportData', //name,method
    },
  })
  
  const emit = defineEmits([
    'fetch-data',
    'add',
    'del',
    'recovery',
    'com_del',
    'recycle',
    'getData',
    'btnCallback',
    'foreignChange',
    'exports',
  ])
  const isLoading = ref(false)
  const queryForm = reactive<any>({
    page: 1,
    num: 20,
    sort: '',
    key: '',
    orderby: '',
    search: {},
  })
  const $baseConfirm = inject<any>('$baseConfirm')
    const $baseMessage = inject<any>('$baseMessage')
  const check_all = () => {
    $baseConfirm('您确定要提交全部数据至市局做数据校验吗', null, async () => {
        const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
        })
        const { msg }: any = await api('sport_zk_exam', 'check','get',{})
        $baseMessage(msg, 'success', 'hey')
        loading.close()
        await getData()
    })
    }

    const check_day = () => {
    $baseConfirm('您确定要提交本日数据至市局做数据校验吗', null, async () => {
        const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
        })
        const { msg }: any = await api('sport_zk_exam', 'check','get',{day:1})
        $baseMessage(msg, 'success', 'hey')
        loading.close()
        await getData()
    })
    }

    const check_truncate = () => {
        $baseConfirm('您确定要清空数据吗', null, async () => {
            const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
            })
            const { msg }: any = await api_truncate(props.config_table.tablename, {})
            $baseMessage(msg, 'success', 'hey')
            loading.close()
            await getData()
        })
    }
  //导出数据
  const exportData = () => {
    if (queryForm.search) {
      //json转字符串
      queryForm.search = JSON.stringify(queryForm.search)
    }
    let date_search = ''
    for (let i = 0; i < props.config_table.date_search.length; i++) {
      if (queryForm[props.config_table.date_search[i].field]) {
        date_search += `&${props.config_table.date_search[i].field}=${queryForm[props.config_table.date_search[i].field]}`
      }
    }
    console.log(props.config_table)
    window.open(
      `${import.meta.env.VITE_APP_BASE_URL}${props.config_table.tablename}/${props.exportMethod}?key=${queryForm.key}&sort=${queryForm.sort}&orderby=${
        queryForm.orderby
      }&search=${queryForm.search}${date_search}&region_id=${props.config_table.login_log.region_id}`,
      '_blank'
    )
    if (queryForm.search) {
      //字符串转json
      queryForm.search = JSON.parse(queryForm.search)
    }
  }
  //外键更换
  const foreignChange = ($event: any, model: any, field: any) => {
    //调用主框架中的方法
    console.log(1)
    emit('foreignChange', $event, model, field)
  }
  const btnCallback = (method: any) => {
    //调用主框架中的方法
    emit('btnCallback', method)
  }
  //查看数据
  const getData = () => {
    //调用主框架中的方法
    emit('getData')
  }
  //查看回收站
  const recycle = () => {
    //调用主框架中的方法
    emit('recycle')
  }
  //进行添加
  const add = () => {
    //调用主框架中的方法
    emit('add')
  }
  //进行批量删除
  const del = () => {
    //调用主框架中的方法
    emit('del', false)
  }
  //进行批量恢复
  const recovery = () => {
    //调用主框架中的方法
    emit('recovery', false)
  }
  //进行批量彻底删除
  const com_del = () => {
    //调用主框架中的方法
    emit('com_del', false)
  }
  const exports = () => {
    //调用主框架中的方法
    emit('exports', false)
  }
  
  //获取导入模板
  const importTemplate = () => {
    window.open(`${import.meta.env.VITE_APP_BASE_URL}/${props.config_table.tablename}/import_example`, '_blank')
  }
  //进行搜索
  const selectData = () => {
    isLoading.value = true
    if (queryForm.search) {
      //json转字符串
      queryForm.search = JSON.stringify(queryForm.search)
    }
    //调用主框架中的方法
    emit('fetch-data', queryForm)
    if (queryForm.search) {
      //字符串转json
      queryForm.search = JSON.parse(queryForm.search)
    }
    isLoading.value = false
  }
  </script>
  <style scoped>
  .z-col {
    width: 188px;
    padding: 5px;
  }
  .z-col_ {
    width: 88px;
    padding: 5px;
  }
  
  .z-col2 {
    width: 300px;
    padding: 5px;
  }
  </style>
  